<template>
	<view class="container">
		<view class="main">
			<view style="margin-top: 50upx;"><text style="color: #666666;">群组名称：</text><text>{{name}}</text></view>
			<view style="margin-top: 50upx;color:#666666">管理员拥有以下权限</view>
			<view class="role" :style="{marginTop:index==0?'50upx':''}" v-for="(item,index) in _pemission" :key="index">
				<image src="/static/temp/gou.png" style="width: 40upx;height: 40upx;"></image>
				<text class="role-show">{{item}}</text>
			</view>
			<view v-if="hasLogin" class="btn" @click="addMember()">接受邀请</view>
			<view v-else class="btn">
				<button  open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">登录</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default {

		data() {
			return {
				id: 0,
				name:'',
				_pemission:[
					'查看群组',
					'查看接龙',
					'核销订单'
				]
			}
		},
		onLoad(option) {

		},
		onShow() {
			let option = this.$api.currentPageOption();
			this.id = option.id;
			this.clusterInfo()
		},
		onReachBottom() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			
		},
		methods: {
			...mapMutations(['login']),
			async decryptPhoneNumber(e) {
			    if(e.detail.errMsg!='getPhoneNumber:ok'){
			    	this.$api.msg('获取用户手机失败');
			    	return false;
			    }
				let that =this;
			    uni.login({
			      provider: 'weixin', //使用微信登录
			      success:async function (loginRes) {	
			    	 let  code= loginRes.code;
					 
					 let params = {'code':code,'iv':e.detail.iv,'encData':e.detail.encryptedData};
					 let data = await Api.apiCall('post',Api.apiName.wx_auto_reg,params);
					 if(data.data){
					 	that.login(data.data);
					 }
			      }
			    });
				
				
			  },
			async clusterInfo() {
				let data = await Api.apiCall('get', Api.apiName.cluster_detail, {
					id: this.id
				});
				if (!data) {
					return;
				}
				this.name = data.data.name;
			},
			async addMember() {
				let that =this;
				let data = await Api.apiCall('post', Api.apiName.cluster_add_member, {id: this.id});
				if (!data) {
					return;
				}
				if(data.data.status==0){
					this.$api.msg(data.data.message)
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/group/list?id='+that.id
						})
					},2500)
				}else{
					this.$api.msg(data.data.message)
				}
				
			},

		},

	}
</script>

<style lang='scss'>
	page {
		background: #F5F5F5;
	}

	.container {
		display: flex;
		flex-direction: column;
	}
	button{
		background: none !important;
		line-height: 39rpx !important;
		height: 39rpx !important;
		font-size: 28rpx !important;
		color:#FFFFFF !important;
	}
	button::after{
		border: none !important;
	}
	.main{
		margin: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.role {
		display: flex;
		align-items: center;
		margin-top: 20upx;
		font-size: 24upx;
	}

	.role-show {
		margin-left: 10upx;
		font-weight: 800;
	}

	.btn {
		color: #FFFFFF;
		background: #23A948;
		padding: 20rpx;
		border-radius: 30rpx;
		width: 100%;
		text-align: center;
		margin-top: 260rpx;
	}
	.bottom_menu{
		position: fixed;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 2;
	}
</style>